<!DOCTYPE html>
<html>
<head>
    <!--179000612陈攀文-->
    <meta charset="utf-8" />
    <title>事件</title>
    <style type="text/css">
        input{font-size:26px;margin-top: 20px;}
        body{background-image: url(../image/tk-grassland.png);}
        #mytank{position: absolute;left:10px;top:100px}

    </style>
</head>
<body>
<input type="button" value="按钮一" id="btn1"/>
<input type="button" value="按钮二" id="btn2" ondblclick="btn2()" />
<input type="button" value="按钮三" id="btn3"/>
<hr />
<img id="mytank" src="../image/tk-right.png"/>
<script type="text/javascript">
    //按钮一
    let btn1 = document.querySelector("#btn1");
    btn1.onclick = () => alert("javascript事件测试一");

    //按钮二
    function btn2() {
        document.getElementById("btn2").value="按钮二测试";
    }

    //按钮三 this获取目标元素的信息
    let btn3 = document.querySelector("#btn3");
    btn3.addEventListener("click",function () {
        alert("javascript事件测试三");
        btn3.onmouseover = this.style.backgroundColor = "#ff0000";
        btn3.onmouseover = this.style.fontFamily = "宋体";
        //目标元素btn3
        // console.log(this);
        // console.log(this.innerHTML);
        //this.style.backgroundColor = "#ff0000";
        //this.style.fontFamily = "宋体";
    });

    var mytank = document.getElementById('mytank');
    window.addEventListener(
        'keydown',
        function(e){
            console.log(e.keyCode);
            let left=mytank.offsetLeft;
            let top=mytank.offsetTop;
            //右
            if(e.keyCode == 39){
                if (left>1440){
                    alert("到最右边了,换个方向试试");
                }else {
                    mytank.src="../image/tk-right.png";
                    mytank.style.left = (mytank.offsetLeft + 10) + 'px';
                }
            }
            //左
            if (e.keyCode == 37){
                if (left<0){
                    alert("到最左边了，换个方向试试");
                }else {
                    mytank.src="../image/tk-left.png";
                    mytank.style.left = (mytank.offsetLeft - 10) + 'px';
                }
            }
            //上
            if (e.keyCode == 38){
                if (top<84){
                    alert("到最上边了，换个方向试试");
                }else {
                    mytank.src="../image/tk-up.png";
                    mytank.style.top = (mytank.offsetTop - 10) + 'px';
                }
            }
            //下
            if (e.keyCode == 40){
                if (top>720){
                    alert("到最下边了，换个方向试试");
                }else {
                    mytank.src="../image/tk-down.png";
                    mytank.style.top = (mytank.offsetTop + 10) + 'px';
                }
            }
        });
            // 禁用右键
            document.onmousedown = function(){
            if(event.button == 2){
                 alert("此页面不能使用右键！");
                return false;
            }
         }

</script>
</body>
</html>
